<template>
	<!--附件简历-->
	<view>
		<myHead :title="title" :right="false" ></myHead>

		<view class="file-box" v-for="(item, index) in Attachs" :key="index">
			<view class="fl" style="width: 90%" @click="previewFile(item)">
				<view style="display: flex">
					<image v-if="item.filetype == 'pdf'" src="/static/recruit/home/pdf.png" class="image"></image>
					<image v-else src="/static/recruit/home/word.png" class="image"></image>
					<view style="flex: 1">
						<view class="name">
							{{ item.Title }}
						</view>
					</view>
				</view>
			</view>
			<u-icon name="more-dot-fill" size="22" @click="tapActionSheet(item)"></u-icon>
		</view>

		<view v-if="Attachs.length < 3">
			<lsj-upload ref="lsjUpload" childId="upload1" :width="width" :height="height" :option="option" :size="size"
				:formats="formats" :debug="debug" :instantly="instantly" @change="onChange" @uploadEnd="onuploadEnd"
				@progress="progress" :count="count">
				<view class="btn" :style="{ width: width, height: height }">
					<view class="file-box1">
						<view>
							<image class="img" src="/static/recruit/home/approveProfile.png">
							</image>
						</view>
						<view class="shangchuan">
							<view class="shangtitle">上传简历</view>
							<view class="shangtext">最多上传3个附件，支持pdf、doc、docx后缀的文件，大小限制8M</view>
						</view>
					</view>
				</view>
			</lsj-upload>
		</view>
		<u-action-sheet :actions="list" :show="show" cancelText="取消" :safeAreaInsetBottom="true"
			:closeOnClickOverlay="true" :closeOnClickAction="true" @select="selectClick"
			@close="show = false"></u-action-sheet>
	</view>
</template>

<script>
	import myHead from "@/pages/component/baseHead.vue";
	import lsjUpload from "@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload.vue";
	import {
		Base64
	} from "node_modules/js-base64/base64.js";
	export default {
		data() {
			return {
				list: [{
						name: "下载",
					},
					{
						name: "删除",
						color: "red",
					},
				],
				show: false,
				operate: {},
				title: "附件简历",
				URL: this.$config.domain.staticUrl,
				// 上传接口参数
				option: {
					// 上传服务器地址，需要替换为你的接口地址
					url: this.$config.domain.baseUrl + "/api/core/file/upload",
					// 上传附件的key
					name: "file",
					// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
					header: {
						Authorization: uni.getStorageSync("access_token").token_type +
							" " +
							uni.getStorageSync("access_token").access_token,
					},
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 必传宽高且宽高应与slot宽高保持一致
				width: "750rpx",
				height: "300rpx",
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: "pdf,doc,docx",
				// 文件上传大小限制
				size: 8,
				// 文件数量限制
				count: 3,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				// 是否打印日志
				debug: true,
				// 演示用
				tabIndex: 0,
				Attachs: [],
				ResumeId: "", //简历Id
				Title: "", //简历名称
				FilePath: "", //文件
				FileExt: "", //文件类型
				SortCode: "", //排序码
				upURL: this.$config.domain.staticUrl + "/fileview/onlinePreview?url=",
			};
		},
		//子组件
		components: {
			myHead,
			lsjUpload,
		},
		onLoad(o) {
			//this.getAttachmentResume()
		},
		onShow() {
			this.myjianli();
		},
		onReady() {},
		// 计算方法
		methods: {
			//下载删除开关按钮
			tapActionSheet(item) {
				this.operate = item;
				this.show = true;
			},
			selectClick(index) {
				if (index.name == "下载") {
					this.download(this.operate);
				} else if (index.name == "删除") {
					this.delJob(this.operate);
				}
			},
			myjianli() {
				this.$http.huirc.resumemy().then((res) => {
					if (res.Result) {
						if (res.Result.Id) {
							this.ResumeId = res.Result.Id;
							this.Attachs = res.Result.Attachs;
							this.Attachs.forEach((item) => {
								let a = item.Title.split(".");
								item.filetype = a[1];
								item.Titles = a[0];
							});
						} else {
							uni.navigateTo({
								url: "/pages/views/packageB/type-jobhunting/resume/edit/basic",
							});
						}
					} else {
						this.$util.toast("请完善基本信息");
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/views/packageB/type-jobhunting/resume/resume",
							});
						}, 1500);
					}
				});
			},
			// 上传结束
			onuploadEnd(item) {
				let that = this;
				// ---可删除--演示上传完成后取服务端数据
				if (item["responseText"]) {
					let datalift = JSON.parse(item.responseText);
					if (datalift.Success) {
						if (datalift.Result) {
							that.Title = datalift.Result.OriginalName; //简历名称
							that.FilePath = datalift.Result.Path; //文件
							//	this.	FileExt: '', //文件类型
							//	this.	SortCode: '', //排序码
							that.attachcr();
						}
					}
				}
			},
			// 新建附件简历
			attachcr() {
				this.$http.huirc
					.attachcr({
						ResumeId: this.ResumeId, //简历Id
						Title: this.Title, //简历名称
						FilePath: this.FilePath, //文件
						FileExt: this.FileExt, //文件类型
						SortCode: this.SortCode, //排序码
					})
					.then((res) => {
						this.myjianli();
					});
			},
			// 预览附件简历
			previewFile(item) {
				console.log(item);
				let ures = this.URL + item.FilePath;
				uni.navigateTo({
					url: `/pages/views/packageB/type-jobhunting/previewFile?src=${ures}&title=${item.Titles}&fileType=${item.filetype}`,
				});
			},
			//删除
			delJob(data) {
				let that = this;
				uni.showModal({
					title: "删除提示",
					content: "确认要删除这条数据",
					success: function(res) {
						if (res.confirm) {
							that.$http.huirc
								.attachdel({
									id: data.Id,
								})
								.then((res) => {
									if (res.Success) {
										that.$util.toast("删除成功");
										that.myjianli();
									}
								});
						}
					},
				});
			},
			//下载
			download(item) {
				console.log(item);
				uni.downloadFile({
					url: this.URL + item.FilePath, //文件的下载路径
					success(res) {
						console.log(res);
						//   //保存到本地
						uni.saveFile({
							tempFilePath: res.tempFilePath, //文件的临时路径
							success: function(res) {
								console.log("111",res);
								const savedFilePath = res.savedFilePath;
								// 打开文件
								uni.openDocument({
									filePath: savedFilePath,
									success: function(res) {
										uni.hideLoading();
									},
									fail: function(res) {},
									complete: function(res) {
										setTimeout(uni.hideLoading(), 4000);
									},
								});
							},
							fail: function(err) {},
						});
					},
					fail(res) {},
				});
			},
			// 上传进度回调
			progress(item) {
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
			},
			// 文件选择回调
			onChange(files) {
				// 更新选择的文件
				this.files = files;
			},
			// 手动上传
			upload() {
				// name=指定文件名，不指定则上传所有type等于waiting和fail的文件
				this.$refs["lsjUpload" + this.tabIndex].upload();
			},
			// 指定上传某个文件
			resetUpload(name) {
				this.$refs["lsjUpload" + this.tabIndex].upload(name);
			},
			/**
			 * 打开nvue窗口查看非跟随窗口滚动效果
			 */
			open() {
				uni.navigateTo({
					url: "/pages/nvue-demo/nvue-demo",
				});
			},
			openDoc(data) {
				if (this.isAssetTypeAnFile(data.f_wenjianhouzui)) {
					//文件
					uni.downloadFile({
						url: this.$config.domain.staticUrl + data.f_jianlifujianfangwenlujing,
						success: function(res) {
							console.log(res);
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log("打开文档成功");
								},
							});
						},
					});
				} else {
					this.$util.toast("文件后缀错误，打不开");
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.file-box {
		padding: 30rpx 40rpx;
		background: #ffffff;
		margin: 20rpx 20rpx 0rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;

		.del {
			width: 10%;
			color: red;
			font-size: 26rpx;
		}

		.download {
			font-size: 26rpx;
			color: rgb(10, 10, 230);
			width: 10%;
		}

		.image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 30rpx;
			flex-shrink: 0;
		}

		.name {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			table-layout: fixed;
			word-break: break-all;
			overflow: hidden;
		}
	}

	.file-box1 {
		padding: 30rpx 0rpx;
		background: #ffffff;
		margin: 20rpx;
		border-radius: 10rpx;
		display: flex;
		box-sizing: border-box;

		.img {
			width: 236rpx;
			height: 192rpx;
		}

		.shangchuan {
			.shangtitle {
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				padding: 10rpx 0;
			}

			.shangtext {
				font-size: 22rpx;
				color: #999999;
				margin-top: 40rpx;
				padding: 0 0 0 50rpx;
			}
		}
	}
</style>